//顶部
var classiFication=document.querySelector('.classification') //弹出框
var oTopBtn=document.querySelectorAll('.homePage')
var checked=true
oTopBtn[0].onclick=function(){
    this.classList.add('active')
    oTopBtn[1].classList.remove('active')
    classiFication.style.display='none';
}
oTopBtn[1].onclick=function(){
    this.classList.add('active')
    oTopBtn[0].classList.remove('active')
    if(checked){
        classiFication.style.display='block';
        checked=false;
    }else{
        classiFication.style.display='none';
        checked=true;
    }
        
    
    
}

//注册登录
var oPasswd=document.querySelector('.headPortrait')
var oPasswdPage=document.querySelector('.headPortraitbox')
oPasswd.onclick=function(){
    if(checked){
        oPasswdPage.style.display='block'
        checked=false
    }else{
        oPasswdPage.style.display='none'
        checked=true
    }
    
}
//消息弹出框
var oMessBtn=document.querySelector('.message')
var oMessBox=document.querySelector('.messageBox')
var oDelBtn=document.querySelector('.messageBox-right-top img')
oMessBtn.onclick=function(){
    if(checked){
        oMessBox.classList.add('on')
        checked=false
    }else{
        checked=true
    }
}
oDelBtn.onclick=function(){
    oMessBox.classList.remove('on')
    checked=true
}

//导航栏
var  oNav=document.querySelectorAll('.navbox')
var oImg=document.querySelectorAll('.navbox-right img')
for(var i=0;i<oNav.length;i++){
    oNav[i].index=i
    oNav[i].onclick=function(){
        var oUl=this.nextElementSibling;
        var oLi=oUl.children
        if(getComputedStyle(oUl).height=='0px'){
            oUl.style.height=oLi[0].offsetHeight*oLi.length +20*oLi.length+'px'
            oImg[this.index].style.transform='rotate('+90+'deg)'
        }else{
            oUl.style.height=0
            oImg[this.index].style.transform='rotate('+0+'deg)'
        }
        
    }
}

//form表单点击事件
 var onboSe= document.querySelectorAll('.onboarding-select')
 var oSele=document.querySelectorAll('#produce')
 for(var i=0;i<onboSe.length;i++){
    onboSe[i].index=i
    
     onboSe[i].onclick=function(){
         if(oSele[this.index].style.display=='block'){
            oSele[this.index].style.display='none'
         }else{
            oSele[this.index].style.display='block';
         }
     }
 }
 var oLi1=document.querySelectorAll('.bumen li')
 for(var i=0;i<oLi1.length;i++){
     oLi1[i].onclick=function(){
         var oSpan=this.parentElement.parentElement.previousElementSibling
         oSpan.innerHTML=this.innerHTML
             }
 }
 var oLi2=document.querySelectorAll('.zhiwei li')
 for(var i=0;i<oLi2.length;i++){
     oLi2[i].onclick=function(){
         var oSpan=this.parentElement.parentElement.previousElementSibling
         oSpan.innerHTML=this.innerHTML
             }
 }
 var oLi3=document.querySelectorAll('.leixing li')
 for(var i=0;i<oLi3.length;i++){
     oLi3[i].onclick=function(){
         var oSpan=this.parentElement.parentElement.previousElementSibling
         oSpan.innerHTML=this.innerHTML
             }
 }
 var oLi4=document.querySelectorAll('.zhuangtai li')
 for(var i=0;i<oLi4.length;i++){
     oLi4[i].onclick=function(){
         var oSpan=this.parentElement.parentElement.previousElementSibling
         oSpan.innerHTML=this.innerHTML
             }
 }
 var oLi5=document.querySelectorAll('.laiyuan li')
 for(var i=0;i<oLi5.length;i++){
     oLi5[i].onclick=function(){
         var oSpan=this.parentElement.parentElement.previousElementSibling
         oSpan.innerHTML=this.innerHTML
             }
 }

 var data=[
     {id:'UID1',name:'晨晨',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID2',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID3',name:'张三',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID4',name:'李四',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID5',name:'陈武',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID6',name:'王二',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID7',name:'王麻子',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID8',name:'刘德华',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID9',name:'郭富城',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID10',name:'蔡徐坤',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID11',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'兼职',source:'校招',auditors:'Gionan'},
     {id:'UID12',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'兼职',source:'校招',auditors:'Gionan'},
     {id:'UID13',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'兼职',source:'校招',auditors:'Gionan'},
     {id:'UID14',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'兼职',source:'校招',auditors:'Gionan'},
     {id:'UID15',name:'王培',department:'市场部',posts:'前台',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'兼职',source:'校招',auditors:'Gionan'},
     {id:'UID16',name:'王培',department:'市场部',posts:'前台',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID17',name:'二二',department:'市场部',posts:'前台',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID18',name:'二二',department:'市场部',posts:'前台',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID19',name:'二二',department:'市场部',posts:'前台',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'实习',source:'校招',auditors:'Gionan'},
     {id:'UID20',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'实习',source:'校招',auditors:'Gionan'},
     {id:'UID21',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'实习',source:'校招',auditors:'Gionan'},
     {id:'UID22',name:'王培',department:'市场部',posts:'设计主管',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'实习',source:'校招',auditors:'Gionan'},
     {id:'UID23',name:'王培',department:'市场部',posts:'设计主管',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'实习',source:'校招',auditors:'Gionan'},
     {id:'UID24',name:'六六',department:'市场部',posts:'设计主管',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'实习',source:'校招',auditors:'Gionan'},
     {id:'UID25',name:'六六',department:'市场部',posts:'设计主管',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID26',name:'六六',department:'市场部',posts:'设计主管',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID27',name:'六六',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID28',name:'六六',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID29',name:'六六',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'全职',source:'校招',auditors:'Gionan'},
     {id:'UID30',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID31',name:'七七',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID32',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已放弃',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'已入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},
     {id:'UID33',name:'王培',department:'市场部',posts:'市场经理',phonenumber:'15680990883',state:'待入职',date:'2022-8-5',approval:'零时工',source:'校招',auditors:'Gionan'},

    ]
var page=1;
//当前页面
var count=10;
//每页多少条
var hired=[];
var fangqi=[];
var waitArr=[];
var oTbody=document.querySelector('.form111 tbody')
var oTbody1=document.querySelector('.form222 tbody')
var oTbody2=document.querySelector('.form333 tbody')


var oPagination=document.querySelector('.pagination')
var oPagination1=document.querySelector('.pagination1')
var oPagination2=document.querySelector('.pagination2')

//搜索框
var oSearch=document.querySelector('.serch input')
var oSearchBt=document.querySelector('.serch img')
//渲染数据
function render(){
    hired=[];
    fangqi=[];
    waitArr=[];
    var str=oSearch.value;  //搜索得内容
    var renderData=[]  //准备一个空数组来存我们搜索出来的数据
    //已入职的数组
    
    // if(str.trim()==''){  //没有搜索内容
    //     renderData=data
    // }else{
    //     //有搜索得内容
    //     for(var i=0;i<data.length;i++){  //循环数据
    //         if(data[i].name==str){    //如果搜索得内容等于数据里面的内容
    //             renderData.push(data[i])  //就加入进存搜索出来的数组里
    //         }
    //     }
    // }
    if(str.trim()==''){  //没有搜索内容
        for(var i=0;i<data.length;i++){  //循环数据
            if(data[i].state=='已入职'){    //如果搜索得内容等于数据里面的内容
                hired.push(data[i])  //就加入进存搜索出来的数组里
            }else if(data[i].state=='已放弃'){
                fangqi.push(data[i])
            }else{
                waitArr.push(data[i])
            }
        }
    }else{
        //有搜索得内容
        for(var i=0;i<data.length;i++){  //循环数据
            if(data[i].name==str){    //如果搜索得内容等于数据里面的内容
                renderData.push(data[i])  //就加入进存搜索出来的数组里
            }
        }
    }
    
    
    //让table为空
    oTbody.innerHTML='';
    oTbody1.innerHTML='';
    oTbody2.innerHTML='';
    var renderArr=waitArr.slice((page-1)*count,page*count) //根据count和page准备渲染得数据
    var renderArr1=hired.slice((page-1)*count,page*count)
    var renderArr2=fangqi.slice((page-1)*count,page*count) 
    var renderArr3=renderData.slice((page-1)*count,page*count)


    for(var i=0;i<renderArr.length;i++){
        //循环渲染得数据
        var oTr=document.createElement('tr')
        oTr.innerHTML=`
            <td>${renderArr[i].id}</td>
            <td>${renderArr[i].name}</td>
            <td>${renderArr[i].department}</td>
            <td>${renderArr[i].posts}</td>
            <td>${renderArr[i].phonenumber}</td>
            <td> <span> ${renderArr[i].state} </span> </td>
            <td>${renderArr[i].date}</td>
            <td>${renderArr[i].approval}</td>
            <td>${renderArr[i].source}</td>
            <td>${renderArr[i].auditors}</td>
            <td>
            <a class="edit" class="btn btn-primary">编辑</a>
            <a class="del">删除</a>
            <a class="lookup" class="btn btn-primary ">查看</a>
            </td>
        `
            oTbody.appendChild(oTr)
    }
    for(var i=0;i<renderArr3.length;i++){
        //循环渲染得数据
        var oTr=document.createElement('tr')
        oTr.innerHTML=`
            <td>${renderArr3[i].id}</td>
            <td>${renderArr3[i].name}</td>
            <td>${renderArr3[i].department}</td>
            <td>${renderArr3[i].posts}</td>
            <td>${renderArr3[i].phonenumber}</td>
            <td> <span> ${renderArr3[i].state} </span> </td>
            <td>${renderArr3[i].date}</td>
            <td>${renderArr3[i].approval}</td>
            <td>${renderArr3[i].source}</td>
            <td>${renderArr3[i].auditors}</td>
            <td>
            <a class="edit" class="btn btn-primary">编辑</a>
            <a class="del">删除</a>
            <a class="lookup" class="btn btn-primary ">查看</a>
            </td>
        `
            oTbody.appendChild(oTr)
    }
    for(var i=0;i<renderArr1.length;i++){
        //循环渲染得数据
        var oTr=document.createElement('tr')
        oTr.innerHTML=`
            <td>${renderArr1[i].id}</td>
            <td>${renderArr1[i].name}</td>
            <td>${renderArr1[i].department}</td>
            <td>${renderArr1[i].posts}</td>
            <td>${renderArr1[i].phonenumber}</td>
            <td> <span> ${renderArr1[i].state} </span> </td>
            <td>${renderArr1[i].date}</td>
            <td>${renderArr1[i].approval}</td>
            <td>${renderArr1[i].source}</td>
            <td>${renderArr1[i].auditors}</td>
            <td>
            <a class="edit" class="btn btn-primary">编辑</a>
            <a class="del">删除</a>
            <a class="lookup" class="btn btn-primary ">查看</a>
            </td>
        `
            oTbody1.appendChild(oTr)
    }
    for(var i=0;i<renderArr2.length;i++){
        //循环渲染得数据
        var oTr=document.createElement('tr')
        oTr.innerHTML=`
            <td>${renderArr2[i].id}</td>
            <td>${renderArr2[i].name}</td>
            <td>${renderArr2[i].department}</td>
            <td>${renderArr2[i].posts}</td>
            <td>${renderArr2[i].phonenumber}</td>
            <td> <span> ${renderArr2[i].state} </span> </td>
            <td>${renderArr2[i].date}</td>
            <td>${renderArr2[i].approval}</td>
            <td>${renderArr2[i].source}</td>
            <td>${renderArr2[i].auditors}</td>
            <td>
            <a class="edit" class="btn btn-primary">编辑</a>
            <a class="del">删除</a>
            <a class="lookup" class="btn btn-primary ">查看</a>
            </td>
        `
            oTbody2.appendChild(oTr)
    }
    //渲染页码
    var aPagBtn=document.querySelectorAll('.pageBtn')
    for(var i=0;i<aPagBtn.length;i++){
        oPagination.removeChild(aPagBtn[i].parentNode)
    }
    if(oclk){
        for(var i=1;i<=Math.ceil(renderData.length/count);i++){
            var oLi=document.createElement('li')
            oLi.innerHTML=`<a href="#" class="pageBtn">${i}</a>`
            if(i==page){
                oLi.classList.add('active')
            }
            oPagination.insertBefore(oLi,oPagination.lastElementChild)
            }

    }else{
        for(var i=1;i<=Math.ceil(waitArr.length/count);i++){
            var oLi=document.createElement('li')
            oLi.innerHTML=`<a href="#" class="pageBtn">${i}</a>`
            if(i==page){
                oLi.classList.add('active')
            }
            oPagination.insertBefore(oLi,oPagination.lastElementChild)
            }
    }
    
    
    var aPagBtn=document.querySelectorAll('.pageBtn1')
    for(var i=0;i<aPagBtn.length;i++){
        oPagination1.removeChild(aPagBtn[i].parentNode)
    }

    for(var i=1;i<=Math.ceil(hired.length/count);i++){
    var oLi=document.createElement('li')
    oLi.innerHTML=`<a href="#" class="pageBtn1">${i}</a>`
    if(i==page){
        oLi.classList.add('active')
    }
    oPagination1.insertBefore(oLi,oPagination1.lastElementChild)
    }

    var aPagBtn=document.querySelectorAll('.pageBtn2')
    for(var i=0;i<aPagBtn.length;i++){
        oPagination2.removeChild(aPagBtn[i].parentNode)
    }

    for(var i=1;i<=Math.ceil(fangqi.length/count);i++){
    var oLi=document.createElement('li')
    oLi.innerHTML=`<a href="#" class="pageBtn2">${i}</a>`
    if(i==page){
        oLi.classList.add('active')
    }
    oPagination2.insertBefore(oLi,oPagination2.lastElementChild)
    }

    
}
render()

//给分页加事件
oPagination.addEventListener('click',changePage)
function changePage(){
    if(event.target.className=='pageBtn'){
        // var aPagBtn=document.querySelectorAll('.pageBtn')
        // for(var i=0;i<aPagBtn.length;i++){
        //     aPagBtn[i].parentNode.classList.remove('active')
        // }
        // event.target.parentNode.classList.add('active')
        page=event.target.innerText;
        render();
    }
}
oPagination1.addEventListener('click',changePage1)
function changePage1(){
    if(event.target.className=='pageBtn1'){
        // var aPagBtn=document.querySelectorAll('.pageBtn')
        // for(var i=0;i<aPagBtn.length;i++){
        //     aPagBtn[i].parentNode.classList.remove('active')
        // }
        // event.target.parentNode.classList.add('active')
        page=event.target.innerText;
        render();
    }
}
oPagination2.addEventListener('click',changePage2)
function changePage2(){
    if(event.target.className=='pageBtn2'){
        // var aPagBtn=document.querySelectorAll('.pageBtn')
        // for(var i=0;i<aPagBtn.length;i++){
        //     aPagBtn[i].parentNode.classList.remove('active')
        // }
        // event.target.parentNode.classList.add('active')
        page=event.target.innerText;
        render();
    }
}
//给上一页下一页添加事件
var oPrev=document.querySelector('.prev')
var oNext=document.querySelector('.next')
oPrev.addEventListener('click',prevFn)
oNext.addEventListener('click',nextFn)
function prevFn(){
    if(page>1){
        page--
    }
    render()
}
function nextFn(){
    if(page<Math.ceil(waitArr.length/count)){
        page++
        render()
    }
}

var oPrev1=document.querySelector('.prev1')
var oNext1=document.querySelector('.next1')
oPrev1.addEventListener('click',prevFn1)
oNext1.addEventListener('click',nextFn1)
function prevFn1(){
    if(page>1){
        page--
    }
    render()
}
function nextFn1(){
    if(page<Math.ceil(hired.length/count)){
        page++
        render()
    }
}
var oPrev2=document.querySelector('.prev2')
var oNext2=document.querySelector('.next2')
oPrev2.addEventListener('click',prevFn2)
oNext2.addEventListener('click',nextFn2)
function prevFn2(){
    if(page>1){
        page--
    }
    render()
}
function nextFn2(){
    if(page<Math.ceil(fangqi.length/count)){
        page++
        render()
    }
}
oTbody.addEventListener('click',delFn)
oTbody1.addEventListener('click',delFn)
oTbody2.addEventListener('click',delFn)

function delFn(){
    if(event.target.className.includes('del')){
        //找到id
        var id=event.target.parentNode.parentNode.children[0].innerText
        //循环数据看id是否相等  相等就删除
        for(var i=0;i<data.length;i++){
            if(data[i].id==id){
                data.splice(i,1)
            }
        }
        render()//重新渲染
    }
}


var oclk=false
//搜索按钮
oSearchBt.addEventListener('click',searchFn)
function searchFn(){
    oclk=true;
    page=1
    render()
    
}
//重置
var oReset=document.querySelector('.reset')
oReset.addEventListener('click',resetFn)
function resetFn(){
    oclk=false;
    oSearch.value=''
    render()
    
}
//添加
var oAddBtn=document.querySelector('.add')
oAddBtn.addEventListener('click',addFn)
function addFn(){
    
    var addNmae=document.querySelector('.addname').value
    if(addNmae.trim()==''){
        alert('请输入内容')
        return
    }
    var bumen=document.querySelector('.buMen').innerText
    var zhiwie=document.querySelector('.zhiWei').innerText
    var date=document.querySelector('.daTa').value
    var oPhone=document.querySelector('.phone').value
    var leixing=document.querySelector('.leiXing').innerText
    var zhuangtai=document.querySelector('.zhuangTai').innerText
    var laiyuan=document.querySelector('.laiYuan').innerText
    data.unshift({
        id:'UID'+ parseInt(Math.random()*(100-33)+33),
        name:addNmae,
        department:bumen,
        posts:zhiwie,
        phonenumber:oPhone,
        state:zhuangtai,
        date:date,
        source:laiyuan,
        approval:leixing,
        auditors:'Gionan'
    })
    
    render()
}

//编辑
oTbody.addEventListener('click',editFn)
oTbody1.addEventListener('click',editFn)
oTbody2.addEventListener('click',editFn)
function editFn(){
    if(event.target.className=='edit'){

        $('#editModal').modal('show')
        document.querySelector('.saveID').value=event.target.parentNode.parentNode.children[0].innerText
        document.querySelector('.savename').value=event.target.parentNode.parentNode.children[1].innerText
        document.querySelector('.savebuMen').innerText=event.target.parentNode.parentNode.children[2].innerText
        document.querySelector('.savephone').value=event.target.parentNode.parentNode.children[4].innerText
        document.querySelector('.saveleiXing').innerText=event.target.parentNode.parentNode.children[7].innerText
        document.querySelector('.savezhuangTai').innerText=event.target.parentNode.parentNode.children[5].children[0].innerText
        document.querySelector('.savelaiYuan').innerText=event.target.parentNode.parentNode.children[8].innerText
        document.querySelector('.savedata').value=event.target.parentNode.parentNode.children[6].innerText
        document.querySelector('.savezhiWei').innerText=event.target.parentNode.parentNode.children[3].innerText
    }
}
var oSaveBt=document.querySelector('.SaveBtn')
oSaveBt.onclick=function(){
    
    var id=document.querySelector('.saveID').value
    for(var i=0;i<data.length;i++){
        if(data[i].id==id){
            data[i].name=document.querySelector('.savename').value
            data[i].department=document.querySelector('.savebuMen').innerText
            data[i].posts=document.querySelector('.savezhiWei').innerText
            data[i].phonenumber=document.querySelector('.savephone').value
            data[i].state=document.querySelector('.savezhuangTai').innerText
            data[i].date=document.querySelector('.savedata').value
            data[i].approval= document.querySelector('.saveleiXing').innerText
            data[i].source=document.querySelector('.savelaiYuan').innerText
            
        }
    }
    $('#editModal').modal('hide')
    render()
}

//查看
oTbody.addEventListener('click',lookupFN)
oTbody1.addEventListener('click',lookupFN)
oTbody2.addEventListener('click',lookupFN)

function lookupFN(){
    if(event.target.className.includes('lookup')){

        $('#myModal').modal('show')
        document.querySelector('.lookname').innerText=event.target.parentNode.parentNode.children[1].innerText
        document.querySelector('.lookId').innerText=event.target.parentNode.parentNode.children[0].innerText
       document.querySelector('.lookbumen').innerText=event.target.parentNode.parentNode.children[2].innerText
       document.querySelector('.lookzhiwei').innerText=event.target.parentNode.parentNode.children[3].innerText
       document.querySelector('.lookphone').innerText=event.target.parentNode.parentNode.children[4].innerText
       document.querySelector('.lookzhuangtai').innerText=event.target.parentNode.parentNode.children[5].innerText
       document.querySelector('.lookdate').innerText=event.target.parentNode.parentNode.children[6].innerText
       document.querySelector('.lookleixing').innerText=event.target.parentNode.parentNode.children[7].innerText
       document.querySelector('.looklaiyuan').innerText=event.target.parentNode.parentNode.children[8].innerText
    
    }
}
//正则
var nameZ= /^[\u4e00-\u9fa5]{2,6}$/
var phone=/^1[3-9]\d{9}$/
document.querySelector('.searchName').onblur=function(){
    var str=this.value
    if(str.trim()==''){
        
    }else if(nameZ.test(str)==false){
        alert('请输入正确的格式')
    }
}
document.querySelector('.addname').onblur=function(){
    var str=this.value
    if(str.trim()==''){
       
    }else if(nameZ.test(str)==false){
        alert('请输入正确的格式')
    }
}
document.querySelector('.phone').onblur=function(){
    var str=this.value
    if(str.trim()==''){
        
    }else if(phone.test(str)==false){
        alert('请输入正确的手机号格式')
    }
}

//换页
 document.querySelector('.wait').onclick=function(){
    this.nextElementSibling.classList.remove('active')
    this.nextElementSibling.nextElementSibling.classList.remove('active')
    this.classList.add('active')
    document.querySelector('.form111').style.display='block'
    document.querySelector('.form222').style.display='none'
    document.querySelector('.form333').style.display='none'

}
 document.querySelector('.already').onclick=function(){
    
    this.nextElementSibling.classList.remove('active')  
     this.previousElementSibling.classList.remove('active')
     this.classList.add('active')
     document.querySelector('.form111').style.display='none'
     document.querySelector('.form222').style.display='block'
     document.querySelector('.form333').style.display='none'

    

 }
 document.querySelector('.comedown').onclick=function(){
    this.previousElementSibling.classList.remove('active')
    this.previousElementSibling.previousElementSibling.classList.remove('active')
    this.classList.add('active')
    document.querySelector('.form333').style.display='block'
    document.querySelector('.form111').style.display='none'
    document.querySelector('.form222').style.display='none'
}


